<template>
    <div class="wrapper">
        <div class="map" id="map"></div>

        <div class="overlay" id="overlay">hello world</div>
    </div>
</template>

<script lang="ts" setup>
import { nanoid } from 'nanoid';
import { Feature, Map, MapBrowserEvent, Overlay, View } from 'ol';
import { Point } from 'ol/geom';
import { Snap } from 'ol/interaction';
import TileLayer from 'ol/layer/Tile';
import VectorLayer from 'ol/layer/Vector';
import { XYZ } from 'ol/source';
import VectorSource from 'ol/source/Vector';
import { Fill, Icon, Stroke, Style } from 'ol/style';
import { onMounted, ref } from 'vue';

const map = ref();
const source = ref();
const layer = ref();
const uid = ref(nanoid());
const snap = ref();
const style = new Style({
    fill: new Fill({ color: [255, 128, 0, 0.5] }),
    stroke: new Stroke({ color: [255, 128, 0, 0.5] }),
    image: new Icon({
        src: new URL('../../assets/map-point.png', import.meta.url).href,
        width: 32,
        height: 32
    })
});

onMounted(() => {
    map.value = new Map({
        target: 'map',
        view: new View({
            center: [116.4, 39.9],
            zoom: 12,
            projection: 'EPSG:4326'
        }),
        layers: [
            new TileLayer({
                source: new XYZ({
                    url: `http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7`
                })
            })
        ]
    });

    source.value = new VectorSource({ wrapX: true });
    layer.value = new VectorLayer({
        source: source.value,
        style
    });
    layer.value.set('uid', uid.value);
    map.value.addLayer(layer.value);

    snap.value = new Snap({
        source: source.value
    });
    map.value.addInteraction(snap.value);

    const feature = new Feature({
        geometry: new Point([116.37829804066813, 39.866640485893114])
    });
    source.value.addFeature(feature);

    map.value.on('click', (e: MapBrowserEvent) => {
        const fixel = map.value.getEventPixel(e.originalEvent);
        const featureAt = map.value.forEachFeatureAtPixel(
            fixel,
            (feature: Feature) => {
                return feature;
            }
        );
        if (featureAt) {
            const overlay = new Overlay({});
            overlay.setElement(document.getElementById('overlay') ?? undefined);
            overlay.setPosition(featureAt.getGeometry().getLastCoordinate());
            overlay.setProperties({ id: 6, name: 'hello world' });
            map.value.addOverlay(overlay);
        } else {
            map.value.getOverlays().forEach((overlay: Overlay) => {
                console.log('overlay=', overlay.getProperties());
                overlay.setPosition(undefined);
            });
        }
    });
});
</script>

<style lang="scss" scoped>
.wrapper {
    height: 100%;
    position: relative;
    .map {
        height: 100%;
    }
    .overlay {
        position: absolute;
        background-color: rgba(255, 128, 0, 0.5);
    }
}
</style>